<template>
	<!-- 商品分享图 -->
	<view>
		<uni-popup ref="popup" type="center" class="poster-alert" :mask-click="false">
			<view class="poster">
				<image :src="poster" @longpress="saveImg"></image>
			</view>
			<view class="hm row-center">
				<view class="item" @tap="saveImg">
					<view class="sharebtn">
						<image
							src="">
						</image> <!-- 保存图标 -->
					</view>
					<text>保存</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="item" @tap="shareWx">
					<view class="sharebtn">
						<!-- <button class="sharebtn" plain="true" data-name="shareBtn" open-type="share"> -->
						<image
							src="">
						</image> <!-- 微信图标 -->
					</view>
					<!-- </button> -->
					<text>微信</text>
				</view>
				<!-- #endif -->
				<view class="item" @tap="goBack">
					<view class="sharebtn">
						<image
							src=""
							style="width:115rpx;height:115rpx;">
						</image> <!-- 保存图标 -->
					</view>
					<text>返回</text>
				</view>
			</view>


		</uni-popup>
	</view>
</template>
<script>
	export default {
		name: 'GoodsPoster', //商品分享海报
		props: {
			// 	goods_id: { //商品id
			// 	  type: Number,
			// 	  default: 6
			// 	},
			// 	goods_img: { //商品图片
			// 	  type: String,
			// 	  default: ''
			// 	},
			// 	goods_title: { //商品名称
			// 	  type: String,
			// 	  default: ''
			// 	},
			// 	nickName: { //微信名称
			// 	  type: String,
			// 	  default: ''
			// 	},
			poster: {
				// 路径
				type: String,
				default: ''
			},
			category: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				// poster: '',
			}
		},
		methods: {
			// 推荐媒体
			goBack() {
				uni.removeStorageSync('imageUrl');
				uni.redirectTo({
					url: '/subMyPage/HotClassifyDetails/shareMedia?category=' + this.category
				});
			},
			show() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			//分享微信好友
			shareWx() {
				wx.showShareImageMenu({
					path: this.poster
				})
			},
			//保存图片
			async saveImg() {
				let that = this;
				let imginfo = await uni.getImageInfo({
					src: that.poster
				})
				if (imginfo[1]) {
					uni.saveImageToPhotosAlbum({
						filePath: imginfo[1].path,
						success() {
							uni.showModal({
								title: '保存成功',
								content: '图片已成功保存到相册',
								showCancel: false
							});
						},
						fail(rej) {
							uni.showModal({
								title: '保存失败',
								content: '图片保存失败请稍后再试',
								showCancel: false
							});
						}
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.poster-alert {
		width: 590rpx;

		.poster {
			width: 590rpx;
			height: 1110rpx;
			overflow: hidden;
			background: #fff;
			border-radius: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.hm {
			margin-top: 60rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: space-around;
			align-items: center;

			.item {
				text-align: center;
				margin: 0 0rpx;

				.sharebtn {
					background: none;
					border: 0;
					padding: 0;
					width: 100rpx;
					height: 100rpx;
					margin: 0 auto;
					margin-bottom: 12rpx;

					&:after {
						display: none;
					}

					image {
						width: 100rpx;
						height: 100rpx;
						display: block;
					}
				}

				text {
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}
</style>